@import './../../../css/common';
.home-page {
	width: 750px;
	overflow-x: hidden;
	overflow-y: scroll;
	height: 100vh;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #eaecf1;
	-webkit-overflow-scrolling: touch;
	.background {
		width: 750px;
		height: 872px;
		position: absolute;
		top: 0;
		left: 0;
		overflow: hidden;
		.bg-max-circle {
			@include bgPic(
				url('https://img10.360buyimg.com/imagetools/jfs/t1/131713/3/14120/61561/5f9a842dE301ecfa2/90ba1962164d6332.png')
			);
			@include wh(804, 804);
			position: absolute;
			top: -107px;
			right: -163px;
			animation: floatAnimation 2s 0.6s linear infinite alternate;
		}
		.bg-middle-circle {
			@include bgPic(
				url('https://img14.360buyimg.com/imagetools/jfs/t1/128435/10/16738/16969/5f9a842dE6d90c322/ffb6974ec998648b.png')
			);
			@include wh(293, 291);
			position: absolute;
			top: 164px;
			right: -117px;
			animation: maxfloatAnimation 1.2s 0.5s linear infinite alternate;
		}
		.top-min-circle {
			@include bgPic(
				url('https://img12.360buyimg.com/imagetools/jfs/t1/152273/18/4049/1156/5f9a842dEef43ba93/be54198bf3902039.png')
			);
			@include wh(57, 57);
			position: absolute;
			top: 700px;
			right: 153px;
			transform: translate(-20px, -10px);
			animation: minfloatAnimation 2s 0.8s linear infinite alternate;
		}
		.bottom-min-circle {
			@include bgPic(
				url('https://img11.360buyimg.com/imagetools/jfs/t1/153572/39/3958/3160/5f9a842dE80ba72c5/2babed471b7748a5.png')
			);
			@include wh(113, 113);
			position: absolute;
			top: -1473px;
			right: -66px;
		}
	}
	.open-bg {
		position: absolute;
		left: 0;
		top: 0;
		border-left: 157px solid #fff;
		border-right: 157px solid #fff;
		border-top: 100px solid #fff;
		border-bottom: 800px solid #fff;
		width: 436px;
		height: 687px;
		background-color: transparent;
		box-sizing: content-box;
		animation: openBg 2.3s 1s ease-out forwards;
	}
	.header-bg {
		position: relative;
	}
	.delete-reminder {
		background-color: bisque;
		position: fixed;
		bottom: 50%;
		left: 0;
		z-index: 30000;
		width: 150px;
		height: 50px;
		line-height: 50px;
		border-radius: 4px;
		font-size: 30px;
		text-align: center;
		display: inline-block;
	}
}

@keyframes openBg {
	0% {
	}
	100% {
		transform: scale(6);
		border-bottom: 0 solid #fff;
	}
}

@keyframes minfloatAnimation {
	0% {
		transform: translateY(-10px);
	}
	100% {
		transform: translateY(20px);
	}
}

@keyframes maxfloatAnimation {
	0% {
		transform: translate(0);
	}
	100% {
		transform: translate(16px, 20px);
	}
}
